<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"> 活动列表</span>
        <nav-btn :sheet-header="options.xlsxHeader"
                 :sheet-list="options.xlsxSheet"
                 xlsx-name="活动列表"
                 @search-method="handleGetSearchActivity"
        />
        <activity_table
          :data_setting="data_setting"
          :list="list"
          need-ctrl needScore
          @handleGetActivityInfo="handleGetActivityInfo">
          <template slot="ctrl" slot-scope="scope">
            <el-button plain size="medium" type="primary" @click="handleToCopyInfo(scope.info)">以此为模板创建</el-button>
          </template>

        </activity_table>
        <el-pagination
          :current-page="currentPage"
          :page-size="currentPageSize"
          :page-sizes="[10, 50, 100, 500, 1000, 99999]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleGetBySizeActivity"
          @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label">已完成 </span>
        <activity-finish @handleGetActivityInfo="handleGetActivityInfo"/>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label">招募中 </span>
        <activity-mid @handleGetActivityInfo="handleGetActivityInfo">
          <el-button slot="ctrl"
                     slot-scope="scope"
                     plain size="medium"
                     type="success"
                     @click="handleActivityGetOne(scope.info)"
          >查看当前招募信息
          </el-button>

        </activity-mid>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label">进行中 </span>
        <activity-ing @handleGetActivityInfo="handleGetActivityInfo"/>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :visible.sync="articleContentshow"
      fullscreen
      title="活动详情概览"
      @cancel="options.activityInfo=null"
    >
      <div class="content">
        <el-descriptions>
          <el-descriptions-item v-for="(item,index ) in info_setting"
                                :label="item"
                                :key="item"
                                v-if="options.activityInfo &&
                        !!options.activityInfo[index]"
                                v-show="index !=='jobsetList'
                        &&index !=='activityEnrollList'"
          >
            {{ options.activityInfo[index]|toJsonParse|address }}
          </el-descriptions-item>

          <h2 style="text-align: center">活动岗位信息</h2>
          <el-table
            v-if="!!options.activityInfo"
            :data="jobInfoList"
            height="250"
            style="width: 100%">
            <el-table-column
              header-align="center"
              align="center"
              v-for="(item,index ) in jobList_setting"
              :prop="index"
              :key="item"
              :label="item"
            />
          </el-table>

        </el-descriptions>
        <h2 style="text-align: center">参与人员信息</h2>
        <el-table
          :data="volunteerList"
          height="250"

          style="width: 100%">
          <el-table-column
            header-align="center"
            align="center"
            v-for="(item,index ) in volunteerList_setting"
            :prop="index"
            :key="item"
            :label="item"
          />
        </el-table>

      </div>
      <el-button style="width: 100%" type="danger" @click="articleContentshow=false">关闭查看</el-button>
    </el-dialog>
    <el-dialog
      :visible.sync="activityJobShow"
      fullscreen
      title="当前招募信息"
      @cancel="options.activityInfo=null"
    >
      <div class="content">

        <el-table
          v-if="!!options.activityInfo"
          :data="jobInfoList"
          :max-height="500"
          style="width: 100%">
          <el-table-column
            header-align="center"
            align="center"
            v-for="(item,index ) in jobList_setting"
            :prop="index"
            :key="item"
            :label="item"
          />
        </el-table>

      </div>
      <el-button style="width: 100%" type="danger" @click="activityJobShow=false">关闭查看</el-button>
    </el-dialog>
  </div>
</template>
<script>
import activityFinish from '@/views/activityManage/activityFinish';
import activityIng from '@/views/activityManage/activityIng';
import activityMid from '@/views/activityManage/activityMid';
import navBtn from '@/components/navBtn';
import {SHEET_NAME} from '@/utils/publicinfo';
import Activity_table from '@/components/activity_table';

export default {
  components: {
    Activity_table,
    activityFinish,
    activityIng,
    activityMid,
    navBtn,
  },
  data() {
    return {
      data_setting: [
        {target: 'activityName'},
        {target: 'activityType'},
        {target: 'communityName'},
        {target: 'activityRecruitPeople'},
        {target: 'activityRecruitedPeople'},
        {target: 'activityCreatedate'},
        {target: 'activityDatetime'},

      ],
      info_setting: {
        'activityName': '活动名称',

        'communityName': '社团名称',

        'activityAddress': '活动地址',
        'activityAuditStatus': '活动审核状态',
        'activityCreatedate': '活动创建日期',
        'activityDatetime': '活动开始日期',
        'activityDisc': '活动描述',
        'activityEndDatetime': '活动截至日期',
        '': '活动参与人员',
        'activityIsfree': '活动是否免费',
        'activityLength': '活动时长',
        'activityMoney': '活动金额',
        'activityRecruitPeople': '活动招募人员',
        'activityRecruitedPeople': '活动已招募人员',
        'activityStatus': '活动状态',
        'activityType': '活动类型',
        'cover': '封面地址',
        'imagePath': '图片地址',
        'isleave': '是否允许请假',
        '_': '岗位设置列表',
        'tags': '活动标志',
      },
      jobList_setting: {
        'jobName': '岗位名称',
        'jobDuty': '岗位职责',
        'jobScore': '岗位积分',
        'jobNumber': '岗位预招募人数',
        'remainNumber': '岗位剩余招募人数',
      },
      volunteerList_setting: {
        'activityenrollDatetime': '参与时长',
        'credits': '积分',
        'hours': '时长',
        'jobDuty': '岗位职责',
        'jobName': '岗位名称',
        'jobScore': '岗位积分',
        'volunteerName': '志愿者名称',
      },
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      keyword: '',
      dataRange: null,
      articleContentshow: false,
      content: null,
      sheet_list: [],
      signShow: false,
      signImg: '',
      searchTime: null,
      auditShow: false,
      auditRes: null,
      auditReason: null,
      refuseReason: false,
      articleShow: false,
      tmpActivityId: '',
      options: {
        xlsxSheet: [],
        xlsxHeader: SHEET_NAME.ACTIVITY,
        activityInfo: null,
      },
      activityJobShow: false,

    };
  },
  computed: {
    jobInfoList() {
      if (!!this.options.activityInfo) {
        return this.options?.activityInfo['jobsetList']?.map(val => {
          return {
            'jobDuty': val?.jobEntity?.jobDuty,
            'jobName': val?.jobEntity?.jobName,
            'jobScore': val.jobScore,
            'jobNumber': val.jobNumber,
            'remainNumber': val.remainNumber,
          };
        });
      } else {
        return [{}];
      }
    },
    volunteerList() {
      if (!!this.options.activityInfo) {
        return this.options?.activityInfo?.activityEnrollList?.map(val => {
          console.log(`val-->`, val);
          return {
            'credits': val?.credits,
            'hours': val?.hours,
            'jobDuty': val?.jobEntuty?.jobDuty,
            'jobName': val?.jobEntuty?.jobName,
            'jobScore': val?.jobEntuty?.jobScore,
            'volunteerName': val?.volunteerEntity?.volunteerName,
          };
        });
      } else {
        return [{}];
      }
    },

  },
  mounted() {
    this.handleGetByNumActivity(1);
  },
  methods: {
    async handleGetBySizeActivity(size) {
      this.currentPageSize = size;
      await this.handleGetActivity();
    },
    // 分页查询全部活动
    async handleGetByNumActivity(num) {
      this.currentPage = num;
      await this.handleGetActivity();
    },
    // 获取单个活动信息
    async handleGetActivityInfo(params) {

      this.articleContentshow = true;
      // console.log(params)
      const res = await this.$http.activityInfo(params);
      if (res.code !== 0) return null;
      console.log(res);

      this.options.activityInfo = res.data;
      // console.log(this.content)
    },
    // 分页查询全部活动
    async handleGetActivity() {
      const res = await this.$http.activityAll({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
      await this.formatDate({data: res.data.list});
    },
    formatDate(params) {
      let {data} = params;
      for (let d of data) {
        this.options.xlsxSheet.push([
          d.activityId,
          d.activityName,
          d.activityType,
          d.activityAddress,
          d.serveTime,
          d.activityDisc,
          d.activityMoney,
          d.activityRecruitedPeople,
          d.communityId + d.communityName,
          d.volunteerId,
        ]);
      }
    },

    handleGetSearchActivity(info) {
      let {
        content,
        dataRange,
      } = info;
      return this.searchByBoth(content, dataRange);

    },
    async searchByBoth(content, dataRange) {
      //  后端接口
      const res = await this.$http.activityAllBySearch(
        {
          from: dataRange[0] ?? '',
          keywords: content ?? '',
          pageNum: this.currentPage ?? '',
          pageSize: this.currentPageSize ?? '',
          to: dataRange[1] ?? '',
        },
      );
      if (res.code !== 0) return null;

      this.list = res.data.list;
      this.total = res.data.totalCount;
      await this.formatDate({data: res.data.list});

    },
    handleToCopyInfo(info) {
      console.log('info-->', info);
      this.$router.push({
        name: 'addActivity',
        params: info,
      });
    },
    async handleActivityGetOne(info) {

      this.activityJobShow = true;
      const res = await this.$http.activityGetOne(info['activityId']);
      if (res.code !== 0) return null;
      console.log(res);

      this.options.activityInfo = res.data;
      this.options.activityInfo['jobsetList'] = res.data.jobSet;

    },

    filterStatus(value, row) {
      return row.activityStatus === value;
    },
    // 筛选是否收费
    filterCharge(value, row) {
      if (value !== 0) return row.activityMoney !== 0;
      return row.activityMoney === value;
    },
  },
};
</script>
<style lang="less" scoped>
.body-content {
  display: flex;
  justify-content: center;
  align-content: center;

  .left-content {
    width: 50%;
  }

  @media screen and (max-width: 900px) {
    flex-direction: column;
    .left-content {
      width: 100%;
    }
  }
}
</style>
